<template>
  <div class="table">
    <div class="box">
      <div class="top-input">
        <input v-model="obj.name" type="text" placeholder="姓名" />
        <input v-model="obj.score" type="number" placeholder="分数" />
        <button v-if="sho" @click="add">确认添加</button>

        <button v-if="!sho" class="button" @click="put">确认编辑</button>
        <button v-if="!sho" class="button" @click="cancel">取消编辑</button>
      </div>
      <div class="table-th">
        <div class="th">
          <span>姓名</span>
          <span>分数</span>
          <span class="span">操作</span>
        </div>
        <div class="th" v-for="(item, index) in list" :key="item.id">
          <span>{{ item.name }}</span>
          <span>{{ item.score }}</span>
          <span class="span">
            <button @click="show(item)">修改</button>
            <button @click="del(item.id)">删除</button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sho: true,
      list: [
        {
          name: '小明',
          score: '66',
          id: 1
        },
        {
          name: '小明',
          score: '66',
          id: 2
        },
        {
          name: '小明',
          score: '66',
          id: 3
        }
      ],
      obj: {
        name: '',
        score: ''
      }
    }
  },
  methods: {
    // 增
    add () {
      console.log(this.obj)
      if (this.obj.name !== '' && this.obj.score !== '') {
        this.list.push({
          name: this.obj.name,
          score: this.obj.score,
          id: Date.now()
        })
        this.sho = true
        this.cancel()
      } else {
        alert('不能为空')
      }
    },
    // 清除
    cancel () {
      this.obj.name = ''
      this.obj.score = ''
    },
    // 删
    del (id) {
      this.list = this.list.filter(item => {
        return item.id !== id
      })
    },
    //改
    put () {
      console.log(this.obj)
      this.list = this.list.map(item => {
        if (item.id === this.obj.id) {
          return JSON.parse(JSON.stringify(this.obj))
        }
        return item
      })
      this.sho = true
      this.cancel()
    },
    show (item) {
      this.sho = false
      this.obj = JSON.parse(JSON.stringify(item))

      console.log(this.obj)
    }
  }
}
</script>

<style less="scss" scoped>
.box {
  height: 500px;
  /* border: 1px solid rgb(146, 143, 143); */
}
.top-input {
  height: 100px;
  line-height: 100px;
  /* border: 1px solid rgb(115, 114, 114); */
  text-align: center;
}
input {
  height: 30px;
  margin: 0 30px;
}
.button {
  padding: 10px;
  margin: 30px;
}
.table-th {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  /* border: 1px solid rgb(141, 140, 140); */
}
.th {
  width: 800px;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
span {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 50px;
  border: 1px solid rgb(135, 132, 132);
}
.span {
  width: 200px;
}
button {
  margin: 0 20px;
}
</style>
